<template>
  <div class="header">
    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="collapseChage">
      <i class="el-icon-menu"></i>
    </div>
    <div class="logo">管理系统</div>
    <div class="header-right">
      <div class="header-user-con">
        <!--搜索-->
        <!--<el-input placeholder="搜店铺名/ID/服务电话/详细地址" v-model="keyword">
                  <el-button slot="append" icon="el-icon-search" @click="searchShop"></el-button>
                </el-input>
                <div class="cur_p add_store">
                  <i class="el-icon-edit-outline"></i>
                  快速建店
                </div>-->
        <!-- 全屏显示 -->
        <div class="btn-fullscreen" @click="handleFullScreen">
          <el-tooltip
            effect="dark"
            :content="fullscreen ? `取消全屏` : `全屏`"
            placement="bottom"
          >
            <i class="el-icon-rank"></i>
          </el-tooltip>
        </div>
        <!-- 消息中心 -->
        <!--<div class="btn-bell">
                    <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
                        <router-link to="/tabs">
                            <i class="el-icon-bell"></i>
                        </router-link>
                    </el-tooltip>
                    <span class="btn-bell-badge" v-if="message"></span>
                </div>-->
        <!-- 更多 -->
        <!--<el-dropdown class="user-name" trigger="click" style="width: 85px">
                            <span class="el-dropdown-link">
                                更多 <i class="el-icon-caret-bottom"></i>
                            </span>
                  <el-dropdown-menu slot="dropdown">
                    <a href="http://product.114family.cn:1777/familyservice-report/backstage/login" target="_blank">
                      <el-dropdown-item>可视化报表系统</el-dropdown-item>
                    </a>
                    <a href="https://docs.qq.com/doc/DUkxYbVBIcW1NT1Z0?opendocxfrom=admin" target="_blank">
                      <el-dropdown-item>智慧书</el-dropdown-item>
                    </a>
                  </el-dropdown-menu>
                </el-dropdown>-->
        <!-- 用户头像 -->
        <div class="user-avator"><img src="../../assets/img/img.jpg" /></div>
        <!-- 用户名下拉菜单 -->
        <el-dropdown
          class="user-name"
          trigger="click"
          @command="handleCommand"
          style="width: 150px"
        >
          <span class="el-dropdown-link">
            欢迎，{{ username }} <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="updatePassword"
              >修改密码</el-dropdown-item
            >
            <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="() => (dialogVisible = false)"
    >
      <ForgetPassword @success="success" />
    </el-dialog>
  </div>
</template>
<script>
import bus from "../common/bus";
import api from "../../api/index";
import openFun from "../../utils/permission";
import ForgetPassword from "./forget.vue";
export default {
  components: {
    ForgetPassword,
  },
  data() {
    return {
      collapse: false,
      dialogVisible: false,
      fullscreen: false,
      showChangePsw: false,
      name: "--",
      message: 2,
      keyword: "",
      password: "",
      passwordSure: "",
      isClick: true,
      operatorName: "personManagement",
      operator: {
        personManagement_changePwd: "",
      },
    };
  },
  computed: {
    username() {
      let username = JSON.parse(
        sessionStorage.getItem("adminUserInfo")
      ).realName;
      return username ? username : this.name;
    },
  },
  methods: {
    success() {
      this.dialogVisible = false;
    },
    sureEdit() {
      if (!this.isClick) return;
      if (!this.password) return this.$message.error("请输入新密码");
      if (!this.passwordSure) return this.$message.error("请再次输入新密码");
      if (this.password !== this.passwordSure)
        return this.$message.error("密码输入不一致");
      let Base64 = require("js-base64").Base64;
      let send = {
        id: JSON.parse(sessionStorage.getItem("adminUserInfo")).id,
        password: Base64.encode(this.password),
      };
      this.isClick = false;
      api.updateUser(send).then(
        (res) => {
          this.isClick = true;
          this.$message.success(res.msg);
          let _t = this;
          setTimeout(function () {
            _t.handleCommand("loginout");
          }, 1000);
        },
        (error) => {
          this.isClick = true;
        }
      );
    },
    closePsw() {
      this.password = "";
      this.passwordSure = "";
    },
    //店铺搜索
    searchShop() {
      if (!this.keyword) return;
      this.$router.push({
        path: `/RealStore`,
        // 只是把query改了，其他都没变
        query: {
          keyword: this.keyword,
        },
      });
    },
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == "loginout") {
        sessionStorage.removeItem("adminUserInfo");
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("resources");
        this.$router.push("/login");
      } else if (command == "updatePassword") {
        console.info("修改密码");
        this.dialogVisible = true;
      }
    },
    // 侧边栏折叠
    collapseChage() {
      this.collapse = !this.collapse;
      bus.$emit("collapse", this.collapse);
    },
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
  },
  mounted() {
    if (document.body.clientWidth < 1500) {
      this.collapseChage();
    }
  },
  created() {
    this.operator = openFun(this.operatorName);
  },
};
</script>
<style scoped>
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: #fff;
}
.collapse-btn {
  float: left;
  padding: 0 21px;
  cursor: pointer;
  line-height: 70px;
}
.header .logo {
  float: left;
  width: 250px;
  line-height: 70px;
}
.header-right {
  float: right;
  padding-right: 0;
}
.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}
.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}
.btn-bell,
.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}
.btn-bell-badge {
  position: absolute;
  right: 0;
  top: -2px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}
.btn-bell .el-icon-bell {
  color: #fff;
}
.user-name {
  margin-left: 10px;
}
.user-avator {
  margin-left: 20px;
}
.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.el-dropdown-link {
  color: #fff;
  cursor: pointer;
}
.el-dropdown-menu__item {
  text-align: center;
}
.add_store {
  font-size: 15px;
  width: 160px;
  margin-left: 30px;
}
</style>
